#{extends 'main.html' /} 
#{set title:'View Product BackLog' /}
#{set roles5:''/}
    <script type="text/javascript">
        jQuery(function($){
							
           $('.editPriority').editable({
                type: 'select',
                options: {
                    1: 'High',
                    2: 'Medium',
                    3: 'Low'
                },
                onSubmit: editPriority
            });
			
            $('.editStory').editable({
                type: 'textarea',
                onEdit: putStoryValid,
				onSubmit: editStory
				
            });
			
			
			 $('.editDepend').editable({
			 	onEdit: putEDependValid,
                onSubmit: editDepend
            });
			
            $('.editPoints').editable({
				onEdit: putPointsValid,
                onSubmit: editPoints
            });
			
            $('.editNotes').editable({
                type: 'textarea',
				onEdit: putNotesValid,
                onSubmit: editNote
            });
            $('.editDemo').editable({
                type: 'textarea',
				onEdit: putDemoValid,
                onSubmit: editDemo
            });
			$('.addSDemo').editable({
                type: 'textarea',
				onEdit: putSDemoValid,
                onSubmit: addSDemo
            });
			$('.addFDemo').editable({
                type: 'textarea',
				onEdit: putFDemoValid,
                onSubmit: addFDemo
            });
			
			$('.addDepend').editable({
                type: 'textarea',
				onEdit: putADependValid,
                onSubmit: addDepend
            });
			
        });
        var rowVisible = true;
        function toggleDisplay(tbl, name){
            var tblRows = tbl.rows;
            
            for (i = 0; i < tblRows.length; i++) {
                if (tblRows[i].className != "headerRow" && tblRows[i].className == name) {
                    tblRows[i].style.display = (rowVisible) ? "none" : "";
                }
            }
            rowVisible = !rowVisible;
        }
</script>
<script>
	jQuery(function($){
			$(".PBtip").tipTip({
				fadeIn:30,
				fadeOut:30
			});
	});
	$(document).ready(function(){
	$("#newStory").colorbox({
		width:"95%", 
		height:"95%", 
		iframe:true
		});
	});

    </script>
	 
<link rel="stylesheet" href="/public/stylesheets/tableStyle.css" />
    <h2><a style ="color:#400040;" href=" @{Projects.showProject(pro.getEntityId())}"> ${pro.name} </a> > Product Backlog</h2><hr>
	<a id="newStory" href="@{UserStories.index(pro.getEntityId())}">Add a new Story to this project</a>
	<div  style="overflow:scroll; height:500px; width=900px">
    <table id="proBcklog" class="table" border=4 align="center" cellspacing=0>
        <tr class="headerRow">
            <th align="left">
                Story Description
				
				#{if controllers.Security.checkPermission('Edit the project backlog story',pro)== true}
            	<img class="PBtip" src="/public/images/edit.png" title="You Can edit the story description of a user story"/>
				#{/if}
				 #{elseif controllers.Security.checkPermission('dev Edit the project backlog story',pro)== true}
                <img class="PBtip" src="/public/images/edit.png" title="You Can edit the story description of a user story of ur component"/>
				#{/elseif}
				
				
            </th>
            <th align="center">
                Depends On
				
				#{if controllers.Security.checkPermission('Edit the project backlog depends on',pro)== true}
            	<img class="PBtip" src="/public/images/edit.png" title="You Can add/edit the dependency of a user story on which component"/>
				#{/if}
				
            </th>
            <th align="center">
                Story Points
				
				#{if controllers.Security.checkPermission('dev Edit the project backlog proint',pro)== true}
                <img class="PBtip" src="/public/images/edit.png" title="You Can edit the story point of a user story of ur component"/>
				#{/if}
				
            </th>
            <th align="center">
                Priority
				
				#{if controllers.Security.checkPermission('Edit the project backlog priority',pro)== true}
            	<img class="PBtip" src="/public/images/edit.png" title="You Can edit the priority for a user story"/>
				#{/if}
				
            </th>
            <th align="center">
                Success Demo
				
				#{if controllers.Security.checkPermission('Edit the project backlog Failure & success demo',pro)== true}
            	<img class="PBtip" src="/public/images/edit.png" title="You Can add/edit success demo for a user story"/>
				#{/if}
				#{elseif controllers.Security.checkPermission('dev Edit the project backlog Failure & success demo',pro)==true}
                <img class="PBtip" src="/public/images/edit.png" title="You Can add/edit success demo for a user story of ur component"/>
				#{/elseif}
				
            </th>
            <th align="center">
                Failure Demo
				
				#{if controllers.Security.checkPermission('Edit the project backlog Failure & success demo',pro)== true}
            	<img class="PBtip" src="/public/images/edit.png" title="You Can add/edit failure demo for a user story"/>
				#{/if}
				#{elseif controllers.Security.checkPermission('dev Edit the project backlog Failure & success demo',pro)==true}
                <img class="PBtip" src="/public/images/edit.png" title="You Can add/edit failure demo for a user story of ur component"/>
				#{/elseif}
				
            </th>
            <th align="center">
                Status
            </th>
            <th align="center"> Sprint Name</th>
            <th align="center">
                Notes 
			
				#{if controllers.Security.checkPermission('Edit the project backlog notes',pro)== true}
            	<img class="PBtip" src="/public/images/edit.png" title="You Can add/edit notes for a user story"/>
				#{/if}
				#{elseif controllers.Security.checkPermission('dev Edit the project backlog notes',pro)==true}
                <img class="PBtip" src="/public/images/edit.png" title="You Can add/edit notes for a user story of ur component"/>
				#{/elseif}
				
            </th>
        </tr>
        <tr id="component">
        	#{if pComponents!=null}
            #{list items:pComponents, as:'Pcomp'}
			#{if Pcomp.name != "Default component"}
            <tr class="headerRow">
                <th class="th2">
                    <h3 class="Tablecomponent">Component ${Pcomp.name}</h3>
                </th>
                 <td align="left" style="border:none">
                		<img id="ex_col" onclick="toggleDisplay(document.getElementById('proBcklog'),'${Pcomp.name}')" src="/public/images/plusmin.gif"/>
				</td>
               
            </tr>
			#{list items:Pcomp.userStoriesAssigned, as:'compStory'}
				#{list items:compStory.appRoles, as:'roles'}
					#{set roles5:roles5+roles.name+", " /}
				#{/list}
			<div id="rows">
            <tr class="${Pcomp.name}">
            	#{if controllers.Users.isSystemAdmin()==true}
				<td ><i>As a/an #{get 'roles5' /}</i><b id="${compStory.id}" class="editStory" align="left">${compStory.story}</b></td>
				#{/if}
            	 #{elseif controllers.ProductBacklog.storyCurrentlyInSprint(compStory.id)==false}
            	 #{if controllers.ProductBacklog.isMember(Pcomp.id)}

                <td ><i>As a/an #{get 'roles5' /}</i><b id="${compStory.id}" class="editStory" align="left">${compStory.story}</b></td>
				#{/if}
				 #{elseif controllers.Security.checkPermission('Edit the project backlog story',pro)==true}
				 <td ><i>As a/an #{get 'roles5' /}</i><b id="${compStory.id}" class="editStory" align="left">${compStory.story}</b></td>
				 #{/elseif}
				 #{else}
				 <td ><i>As a/an #{get 'roles5' /}</i><b id="${compStory.id}" align="left">${compStory.story}</b></td>
				 #{/else}
				 #{/elseif}
				 #{else}
				 <td ><i>As a/an #{get 'roles5' /}</i><b id="${compStory.id}" class="PBtip" title="During the sprint can't edit" align="left">${compStory.story}</b></td>
				 #{/else}
				 #{if controllers.Users.isSystemAdmin()==true}
				  <td align="left">
                    #{list items:compStory.dependOnComponents, as:'depndts'}
                    <li id="${compStory.id}" class="editDepend">${depndts.name}</li>
                    #{/list}
					<i id="${compStory.id}" class="addDepend">add depend</i>
                </td>
				#{/if}
				 #{elseif controllers.ProductBacklog.storyCurrentlyInSprint(compStory.id)== false}
				 #{if controllers.Security.checkPermission('Edit the project backlog depends on',pro)== true}
                <td align="left">
                    #{list items:compStory.dependOnComponents, as:'depndts'}
                    <li id="${compStory.id}" class="editDepend">${depndts.name}</li>
                    #{/list}
					<i id="${compStory.id}" class="addDepend">add depend</i>
                </td>
				#{/if}
				#{else}
				<td align="left">
                    #{list items:compStory.dependOnComponents, as:'depndts'}
                    <li id="${compStory.id}">${depndts.name}</li>
                    #{/list}
					</td>
				#{/else}
				#{/elseif}
				#{else}
				<td align="left">
                    #{list items:compStory.dependOnComponents, as:'depndts'}
                    <li id="${compStory.id}">${depndts.name}</li>
                    #{/list}
					</td>
				#{/else}
				 #{if controllers.Users.isSystemAdmin()==true}
				  <td id="${compStory.id}" class="editPoints" align="center">${compStory.effortEstimation}</td>
				  #{/if}
				#{elseif controllers.ProductBacklog.storyCurrentlyInSprint(compStory.id)==false}
				#{if controllers.ProductBacklog.isMember(Pcomp.id)}
                <td id="${compStory.id}" class="editPoints" align="center">${compStory.effortEstimation}</td>
				 #{/if}
				  #{else}
                <td id="${compStory.id}" align="center">${compStory.effortEstimation}</td>
				#{/else}
				 #{/elseif}
				 #{else}
                <td id="${compStory.id}" align="center">${compStory.effortEstimation}</td>
				#{/else}
				
				#{if controllers.Users.isSystemAdmin()==true}
				<td id="${compStory.id}" class="editPriority" align="center">${compStory.priority}</td>
				#{/if}
				 #{elseif controllers.ProductBacklog.storyCurrentlyInSprint(compStory.id)==false}
				  #{if controllers.Security.checkPermission('Edit the project backlog priority',pro)==false}
				 <td id="${compStory.id}" align="center">${compStory.priority}</td>
				 #{/if}
				 #{secure.check 'Edit the project backlog priority'}
                <td id="${compStory.id}" class="editPriority" align="center">${compStory.priority}</td>
				 #{/secure.check}
				 #{/elseif}
				 #{else}
				  <td id="${compStory.id}" align="center">${compStory.priority}</td>
				 #{/else}
				 #{if controllers.Users.isSystemAdmin()==true}
				 <td>
                    #{list items:sdemo, as:'sucsdemos'}
                    #{if sucsdemos.userStory.id==compStory.id}
                    <li id="${sucsdemos.id}" class="editDemo">${sucsdemos.demo}</li>
                    #{/if}
                    #{/list}
					<i id="${compStory.id}" class="addSDemo">add success demo</i>
                </td>
				#{/if}
				 #{elseif controllers.ProductBacklog.storyCurrentlyInSprint(compStory.id)==false}
				 #{if controllers.ProductBacklog.isMember(Pcomp.id)}
                <td>
                    #{list items:sdemo, as:'sucsdemos'}
                    #{if sucsdemos.userStory.id==compStory.id}
                    <li id="${sucsdemos.id}" class="editDemo">${sucsdemos.demo}</li>
                    #{/if}
                    #{/list}
					<i id="${compStory.id}" class="addSDemo">add success demo</i>
                </td>
				#{/if}
				 #{elseif controllers.Security.checkPermission('Edit the project backlog Failure & success demo',pro)==true}
				 <td>
                    #{list items:sdemo, as:'sucsdemos'}
                    #{if sucsdemos.userStory.id==compStory.id}
                    <li id="${sucsdemos.id}" class="editDemo">${sucsdemos.demo}</li>
                    #{/if}
                    #{/list}
					<i id="${compStory.id}" class="addSDemo">add success demo</i>
                </td>
				#{/elseif}
				#{else}
				<td>
                    #{list items:sdemo, as:'sucsdemos'}
                    #{if sucsdemos.userStory.id==compStory.id}
                    <li id="${sucsdemos.id}">${sucsdemos.demo}</li>
                    #{/if}
                    #{/list}
					</td>
				#{/else}
				#{/elseif}
				#{else}
				<td>
                    #{list items:sdemo, as:'sucsdemos'}
                    #{if sucsdemos.userStory.id==compStory.id}
                    <li id="${sucsdemos.id}">${sucsdemos.demo}</li>
                    #{/if}
                    #{/list}
					</td>
				#{/else}
				 #{if controllers.Users.isSystemAdmin()==true}
				  <td>
                    #{list items:fdemo, as:'Fdemos'}
                    #{if Fdemos.userStory.id==compStory.id}
                    <li id="${Fdemos.id}" class="editDemo">${Fdemos.demo}</li>
                    #{/if}
                    #{/list}
					<i id="${compStory.id}" class="addFDemo">add Failure demo</i>
                </td>
				#{/if}
				#{elseif controllers.ProductBacklog.storyCurrentlyInSprint(compStory.id)==false}
				#{if controllers.ProductBacklog.isMember(Pcomp.id)}
                <td>
                    #{list items:fdemo, as:'Fdemos'}
                    #{if Fdemos.userStory.id==compStory.id}
                    <li id="${Fdemos.id}" class="editDemo">${Fdemos.demo}</li>
                    #{/if}
                    #{/list}
					<i id="${compStory.id}" class="addFDemo">add Failure demo</i>
                </td>
				#{/if}
				#{elseif controllers.Security.checkPermission('Edit the project backlog Failure & success demo',pro)==true} 
                <td>
                    #{list items:fdemo, as:'Fdemos'}
                    #{if Fdemos.userStory.id==compStory.id}
                    <li id="${Fdemos.id}" class="editDemo">${Fdemos.demo}</li>
                    #{/if}
                    #{/list}
					<i id="${compStory.id}" class="addFDemo">add Failure demo</i>
                </td>
				#{/elseif}
				#{else}
				 <td>
				 #{list items:fdemo, as:'Fdemos'}
                    #{if Fdemos.userStory.id==compStory.id}
                    <li id="${Fdemos.id}">${Fdemos.demo}</li>
                    #{/if}
                    #{/list}
					</td>
				 #{/else}
				#{/elseif}
				 #{else}
				 <td>
				 #{list items:fdemo, as:'Fdemos'}
                    #{if Fdemos.userStory.id==compStory.id}
                    <li id="${Fdemos.id}">${Fdemos.demo}</li>
                    #{/if}
                    #{/list}
					</td>
				 #{/else}
                <td id="${compStory.id}" align="center">${compStory.status}</td>
                <td align="left">
                	#{list items:compStory.events, as:'sprintsss'}
						<li id="${sprintsss.id}" value="${sprintsss.id}">
							${sprintsss.name}
						</li>
					#{/list}
					
                </td>
				#{if controllers.Users.isSystemAdmin()==true}
				<td align="center" id="${compStory.id}" class="editNotes">${compStory.note}</td>
				#{/if}
				#{elseif controllers.ProductBacklog.storyCurrentlyInSprint(compStory.id)==false}
				#{if controllers.ProductBacklog.isMember(Pcomp.id)}
                <td align="center" id="${compStory.id}" class="editNotes">${compStory.note}</td>
				#{/if}
				#{elseif controllers.Security.checkPermission('Edit the project backlog notes',pro)==true}
				<td align="center" id="${compStory.id}" class="editNotes">${compStory.note}</td>
				#{/elseif}
				#{else}
				<td align="center" id="${compStory.id}">${compStory.note}</td>
				#{/else}
				#{/elseif}
				#{else}
				<td align="center" id="${compStory.id}">${compStory.note}</td>
				#{/else}
            </tr>
			</div>
			#{set roles5:""/}
            #{/list}
			<br>
			#{/if}
            #{/list}
			#{/if}
        </tr>
		
    </table>
	</div>
	
<script type="text/javascript">
        		
        		function editPoints(content){
					var regx= RegExp("[0-9]{1,2}");
					
					if ( !regx.test(content.current) ) {
						showDialogHelper('Error!', 'Have to enter a number, Try again please', false, '', 'error');
						window.location.reload(true);
						return false;
					}
					else {
						
						$.validationEngine.closePrompt(".editPoints");
						$.post('@{editPoint()}', {
							storyId: content.id,
							newValue: content.current,
							proid: '${projectID}'},
							function(){window.location.reload(true);});
					}
				}
                 
					
				function putPointsValid(){
					$.validationEngine.buildPrompt(".editPoints","Numbers only [0-99]","error");
				}
				
        		function editStory(content){
					var re = RegExp("^[0-9a-zA-Z]");
						
		
					if ( !re.test(content.current) ){
						
						showDialogHelper('Error!','You cant enter special characters for story description', false,'','error');
						return false;
					}
					else{
						
						$.validationEngine.closePrompt(".editStory");
						$.post('@{editDesc()}', {
							storyId: content.id,
							newValue: content.current,
							proid: '${projectID}',
							oldValue: content.previous
						},function(){window.location.reload(true);});
					}					
        		}
				
				function putStoryValid(){
					$.validationEngine.buildPrompt(".editStory","No special characters for story description","error");
				}
        		
        		function editPriority(content){
        			
        			$.post('@{UserStories.editPriority()}',
        			{storyId:content.id,
        			priority:content.current});
        		}
				
        		function editNote(content){
					
					var re = RegExp("^[0-9a-zA-Z]");
					
        			if( !re.test(content.current) ){
						 showDialogHelper('Error!','You cant enter special characters for editing the note', false,'','error');
						 return false;
					}
					else{
						$.validationEngine.closePrompt(".editNotes");
						$.post('@{editNotes()}', {
							storyId: content.id,
							newValue: content.current,
							proid: '${projectID}'
						},function(){window.location.reload(true);});
					}
        		}
				
				function putNotesValid(){
					$.validationEngine.buildPrompt(".editNotes","No special characters for editing the notes");
				}
				
        		function editDemo(content){
        			var re = RegExp("^[0-9a-zA-Z]");
					
        			if( !re.test(content.current) ){
						 showDialogHelper('Error!','You cant enter special characters in editing the demo', false,'','error');
						 return false;
					}
					else {
						$.validationEngine.closePrompt(".editDemo");
						$.post('@{editDemo()}', {
							dId: content.id,
							newValue: content.current,
							proid: '${projectID}'},
							function(){window.location.reload(true);}
						);
					}
        		}


				function putDemoValid(){
					$.validationEngine.buildPrompt(".editDemo","No special characters for editing the demo entry");
				}
				
				function addFDemo(content){
					var re = RegExp("^[0-9a-zA-Z]");
					if( !re.test(content.current) ){
						showDialogHelper('Error!','Have to enter a value, U have Entered special characters for Failure demo', false,'','error');
						return false;
					}
					else {
						$.validationEngine.closePrompt(".addFDemo");
						$.post('@{DemoEntries.associateDemoEntry()}', {
							demo: content.current,
							type:"Faliure",
							storiesId: content.id
							},function(){window.location.reload(true);});
					}
				}
				
				function putFDemoValid(){
					$.validationEngine.buildPrompt(".addFDemo","No special characters for add failure demo");
				}
				
				function addSDemo(content){
					var re = RegExp("^[0-9a-zA-Z]");
					if( !re.test(content.current) ){
						showDialogHelper('Error!','Have to enter a value, U have Entered special characters in success demo', false,'','error');
						return false;
					}
					else {
						$.validationEngine.closePrompt(".addSDemo");
						$.post('@{DemoEntries.associateDemoEntry()}', {
							demo: content.current,
							type: "Sucess",
							storiesId: content.id
						}, function(){
							window.location.reload(true);
						});
					}
				}
				
				function putSDemoValid(){
					$.validationEngine.buildPrompt(".addSDemo","No special characters for add success demo");
				}
				
        		function editDepend(content){
					
					var re = RegExp("^[0-9a-zA-Z]");
					if( !re.test(content.current) ){
						showDialogHelper('Error!','Have to enter a value, U have Entered special characters in edit depend', false,'','error');
						return false;
					}
					else {
						$.validationEngine.closePrompt(".editDepend");
						$.post('@{editdependency()}',
        					{id:content.id,	
        					oldcomp:content.previous,
							proid:'${projectID}',
							newcomp:content.current },
							function(){window.location.reload(true);});
					}
             }
			 
			 	function putEDependValid(){
					$.validationEngine.buildPrompt(".editDepend","No special characters for editing depend component");
				}
			 
			function addDepend(content){
				var re = RegExp("^[0-9a-zA-Z]");
					if( !re.test(content.current) ){
						showDialogHelper('Error!','Have to enter a value, U have Entered special characters in add depend', false,'','error');
						return false;
					}
					else {
					$.validationEngine.closePrompt(".addDepend");
					$.post('@{addDepend()}', {
						id: content.id,
						proid: '${projectID}',
						newcomp: content.current
					},function(){window.location.reload(true);});
				}
        	}
			
			function putADependValid(){
					$.validationEngine.buildPrompt(".addDepend","No special characters for editing depend component");
				}
		
		
</script>